<template>
    <view class="container page">
        <view class="nav-list">
            <view class="nav-item"
                v-for="(item,index) of list" 
                :class="{active:index==viewNavIndex}"
                @click="handleClickNav(index)"
                :key="index">{{item.title}}</view>
        </view>
        <view class="list-wrapper">
            <scroll-view class="list-container" id="list-container"
                @scroll="handleListScroll"
                @touchstart="handleTouchScrollView"
                :scroll-y="true" 
                :scroll-into-view="'scroll-item-'+clickedNavIndex" 
                :show-scrollbar="false"
                :scroll-with-animation="true">
                <view class="list" v-for="(item,listIndex) of list" :key="item.id" :id="'scroll-item-'+listIndex">
                    <view class="title"><text>{{item.title}}</text></view>
                    <view class="item-container">
                        <view class="item" v-for="(item,index) of item.child" :key="index" @click="tiaozhuan" :data-canshu='item'>
                            <image :src="item.image" mode=""></image>
                            <view class="name">{{item.title}}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'easy-scroll',
    props:{
        topDistance:{
            type: Number,
            default:0
        },
				path: {
					type: String
				}
    },
    data() {
        return {
            list: Array(16).fill(1),//列表数据
            list: [
							{
								'id':1,
								'title':'照料护理',
								'child':[
									{
										'id':1,
										'title':'买菜做饭',
										'image':'/static/menus/17.png'
									},
									{
										'id':2,
										'title':'洗浴',
										'image':'/static/menus/42.png'
									},
									{
										'id':3,
										'title':'理发',
										'image':'/static/menus/16.png'
									},
									{
										'id':4,
										'title':'洗脚',
										'image':'/static/menus/41.png'
									},	{
										'id':5,
										'title':'假牙护理',
										'image':'/static/menus/12.png'
									},
									{
										'id':6,
										'title':'定期探望',
										'image':'/static/menus/4.png'
									},
									{
										'id':7,
										'title':'陪伴照料',
										'image':'/static/menus/19.png'
									}
								]
							},
							{
								'id':2,
								'title':'卫生保洁',
								'child':[
									{
										'id':1,
										'title':'洗涤衣物',
										'image':'/static/menus/40.png'
									},
									{
										'id':2,
										'title':'家具保洁',
										'image':'/static/menus/11.png'
									},
									{
										'id':3,
										'title':'废品处理',
										'image':'/static/menus/5.png'
									},
									{
										'id':4,
										'title':'清洗油烟机',
										'image':'/static/menus/28.png'
									},	{
										'id':5,
										'title':'清洗电风扇',
										'image':'/static/menus/26.png'
									},
									{
										'id':6,
										'title':'清洗热水器',
										'image':'/static/menus/27.png'
									},
									{
										'id':7,
										'title':'市内保洁',
										'image':'/static/menus/31.png'
									},
									{
										'id':8,
										'title':'清理冰箱',
										'image':'/static/menus/25.png'
									},
									{
										'id':9,
										'title':'擦玻璃窗',
										'image':'/static/menus/2.png'
									},
									{
										'id':10,
										'title':'物品整理',
										'image':'/static/menus/38.png'
									},
									{
										'id':11,
										'title':'垃圾分类',
										'image':'/static/menus/15.png'
									},
									{
										'id':12,
										'title':'洗涤被褥',
										'image':'/static/menus/39.png'
									}
								]
							},
							{
								'id':3,
								'title':'改造维修',
								'child':[
									{
										'id':1,
										'title':'换水龙头',
										'image':'/static/menus/10.png'
									},
									{
										'id':2,
										'title':'开锁换锁',
										'image':'/static/menus/14.png'
									},
									{
										'id':3,
										'title':'管道疏通',
										'image':'/static/menus/7.png'
									},
									{
										'id':4,
										'title':'换开关',
										'image':'/static/menus/9.png'
									},	{
										'id':5,
										'title':'修水管',
										'image':'/static/menus/43.png'
									},
									{
										'id':6,
										'title':'维修电视',
										'image':'/static/menus/35.png'
									},
									{
										'id':7,
										'title':'维修冰箱',
										'image':'/static/menus/33.png'
									},
									{
										'id':8,
										'title':'维修洗衣机',
										'image':'/static/menus/37.png'
									},
									{
										'id':9,
										'title':'维修电风扇',
										'image':'/static/menus/34.png'
									},
									{
										'id':10,
										'title':'维修门窗',
										'image':'/static/menus/36.png'
									},
									{
										'id':11,
										'title':'换灯泡',
										'image':'/static/menus/8.png'
									}
								]
							},
							{
								'id':4,
								'title':'生活配送',
								'child':[
									{
										'id':1,
										'title':'液化气配送',
										'image':'/static/menus/22.png'
									},
									{
										'id':2,
										'title':'桶装水配送',
										'image':'/static/menus/32.png'
									},
									{
										'id':3,
										'title':'日用品配送',
										'image':'/static/menus/30.png'
									},
									{
										'id':4,
										'title':'粮油配送',
										'image':'/static/menus/21.png'
									},	{
										'id':5,
										'title':'其他物品',
										'image':'/static/menus/23.png'
									}
								]
							},
							{
								'id':5,
								'title':'出门陪护',
								'child':[
									{
										'id':1,
										'title':'出行陪同',
										'image':'/static/menus/3.png'
									},
									{
										'id':2,
										'title':'就医陪同',
										'image':'/static/menus/13.png'
									},
									{
										'id':3,
										'title':'陪同购物',
										'image':'/static/menus/6.png'
									},
									{
										'id':4,
										'title':'陪床护理',
										'image':'/static/menus/20.png'
									},	{
										'id':5,
										'title':'陪伴聊天',
										'image':'/static/menus/18.png'
									},
									{
										'id':6,
										'title':'其他需求',
										'image':'/static/menus/24.png'
									}
								]
							}
						],
            isTouchScrollView: false,
            clickedNavIndex: 0,
            viewNavIndex: 0,
            nodeInfoList: [],
        }
    },
    methods:{
		// 跳转页面
		tiaozhuan(e){
			// 取得点击的目标名字
			let w = e.currentTarget.dataset.canshu.title;
			console.log(this.path)
			if (this.path === 'my') {
				uni.navigateTo({
					url:'/pages/my/my_order/pulish_order',
					success() {
						console.log('12312');
					}
				})
				return false
			}
			uni.navigateTo({
				url:'/pages/demandHall/demand_list',
				success() {
					console.log('12312');
				}
			})
		},
        init(){
            const query = uni.createSelectorQuery().in(this);
            query.selectAll('#list-container .list').boundingClientRect(data => {
                // console.log(data);
                this.nodeInfoList = data
            }).exec()
        },
        handleClickNav(nav){
            if(!this.isTouchScrollView&&this.clickedNavIndex == nav) return;
            // 锁定联动
            this.isTouchScrollView = false;
            // 解决clickedNavIndex相同触发更新失败
            if(this.clickedNavIndex == nav){
                this.clickedNavIndex = -1;
            }
            this.$nextTick(function(){
                this.clickedNavIndex = nav;
                this.viewNavIndex = nav
            })
        },
        handleListScroll(e){
            if(!this.isTouchScrollView) return;
            let scrollTop = this.scrollTop = e.detail.scrollTop;
            // console.log("scrollTop: " + scrollTop);
            let currentNavIndex = this.nodeInfoList.map((item,index)=>({index,...item}))
            .filter(item => item.top <= scrollTop + this.topDistance)
            .sort((a,b)=>b.top-a.top)[0].index;
            // console.log(currentNavIndex);
            this.viewNavIndex = currentNavIndex;
        },
        handleTouchScrollView(){
            this.isTouchScrollView = true;
        },
    },
    mounted() {
        this.$nextTick(function(){
            this.init()
        })
    }
}
</script>

<style lang="stylus" scoped>
.container
    display flex
    height calc(100vh - var(--window-top))
    .nav-list
        width: 200rpx;
        overflow-y auto
        overflow-x hidden
        display flex
        flex-direction column
        align-items center
        font-size 34rpx
        &::-webkit-scrollbar
            width 0
            height 0
            background transparent
        .nav-item
            width 100%
            padding 35rpx 0
            text-align center
            transition: transform .1s linear;
            &.active
                color: #FC503E;
				background-color:#fff
    .list-wrapper
        flex 1
        position relative
        .list-container
            position absolute
            top 0
            left 0
            right 0
            bottom 0
            padding 0 0rpx
            box-sizing border-box
            .title
                height 95rpx
                line-height 95rpx
                text-align center
            .item-container
                display flex
                flex-wrap wrap
                align-items center
                .item
                    width 33.33%
                    text-align center
                    padding-top 21rpx 
                    image
                        width 100rpx
                        height 100rpx
                    .name
                        font-size 26rpx
                        color #565656
	// 下面是我修改的
	.container .nav-list .nav-item{
		font-size:32rpx;
		color:#565656;
		&.active{
			color: #368AFF;
			background-color:#FFFFFF
			border-right:none;
		}   
	}
	.container .nav-list{
		background-color:#F4F4F4
	}
	.item-container {
		padding-bottom: 33rpx
		border-bottom: 1px solid rgba(0, 0, 0, 0.1)
	}
</style>
